<template>
    <div class="admin">
        <!-- 左侧导航 -->
        <div class="nav">
            <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                <el-radio-button :label="false">展开</el-radio-button>
                <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group> -->   
            <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" 
                background-color="#2D3A4B"  text-color="#fff"
            >
                <el-menu-item index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">首页</span>
                    </template>
                </el-menu-item>

                <el-menu-item index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">文档</span>
                    </template>
                </el-menu-item>

                 <el-menu-item index="3">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">引导页</span>
                    </template>
                </el-menu-item>

                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">权限测试页</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1">页面权限</el-menu-item>
                        <el-menu-item index="4-2">指令权限</el-menu-item>
                        <el-menu-item index="4-3">角色权限</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-menu-item index="5">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">图标</span>
                    </template>
                </el-menu-item>

                <el-submenu index="6">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">组件</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="6-1">富文本编辑器</el-menu-item>
                        <el-menu-item index="6-2">Markdown</el-menu-item>
                        <el-menu-item index="6-3">JSON 编辑器</el-menu-item>
                        <el-menu-item index="6-4">Splitpane</el-menu-item>
                        <el-menu-item index="6-5">头像上传</el-menu-item>
                        <el-menu-item index="6-6">Dropzone</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                
            </el-menu>
        </div>
        <!-- /左侧导航 -->
        <!-- 主要内容(组件) -->
        <div class="main">
            <!-- 头部导航 -->
           <div class="mainHeader">
               
               <el-breadcrumb separator="/">
                    
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                </el-breadcrumb>
           </div>
            <router-view />
        </div>
        <!-- /主要内容(组件) -->
    </div>
</template>

<script>
export default {
    data() {
      return {
        //导航展开
        isCollapse: false
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped lang="scss">
    .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
    }
    .admin{
        width: 100%;
        height: 100%;
        .nav{
        width: 200px;
        height: 100%;
        background-color: #2D3A4B;
        float: left;
        }
        .main{
            float: left;
            width: calc(100% - 200px);
            height: 100%;
            .mainHeade{
                line-height: 50px;
                
            }
        }
    }
</style>
